<template>
  <div class="xiaoxHeader">
      <div class="top">消息</div>
      <div class="bir">
      <div class="hongs"></div>
        <div class="nann"><span class="iconfont" id="xit">&#xe62d;</span><div class="desc">系统</div></div>
        <div class="nann"><span class="iconfont" id="chens">&#xe622;</span><div class="desc">活动</div></div>
        <div class="nann"><span class="iconfont" id="fhs">&#xe65a;</span><div class="desc">客服</div></div>
      </div>
      <div class="bottom"><samp class="iconfont" id="chaxun">&#xe6e8;</samp><div>暂无数据...</div></div>
  </div>
</template>

<script>

export default {
  name: 'xiaoxHeader',
  
}
</script>
 
<style scoped>
.xiaoxHeader{
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 0px;
    padding-bottom: 180%;
    background-color: rgb(240, 238, 238);
}
.top{
    width: 100%;
    height:60px;
    background-color:chocolate;
    text-align:center;
    padding:30px 0px;
    border-radius: 10px;
    position: absolute;
    top: -5px;
    color: rgb(255, 255, 255);
    font-size: 17px;
    font-weight: bold;
}
.bir{
    width: 93%;
    height: 80px;
    background-color: #fff;
    border-radius: 10px;
    margin-left: 3.5%;
    position: absolute;
    top: 85px;
}
.nann{
  display: inline-block;
  text-align: center;
  width: 30%;
  height: 100%;
  margin-top: 7px;


}
.iconfont{
    font-size: 23px;
    z-index: 2;
    position: relative;
    top :-3px;
    left: 0px;  
    color: rgb(255, 255, 255);
    border-radius: 35px;
}
.desc{
   margin-top: 10px; 
}
.hongs{
    width: 34px;
    height: 34px;
    background-color: rgb(148, 5, 5);
    border-radius: 35px;
    position: absolute;
    top: 10px;
    left: 35px;
  
}
#chens{
    color:chocolate;
    font-size: 35px;  
    position: relative;
    top: 3px;
}
#fhs{
    background-color:fuchsia;
    font-size: 22px;
    padding: 6px;
    position: relative;
    top: -3px;
}
#xit{
    position: absolute;
    top: 15px;
    left: 41px;
}

.bottom{
    width: 100%;
    position: absolute;
    left: 2%;
    top:300px;
    text-align: center;

}
#chaxun{
    font-size: 50px;
    color: rgb(187, 186, 186);
}



</style>
